<template>
    <el-card class="boox-card">
      <el-table  :data="volunteerlist1" border stripe>
    <el-table-column type="index>" prop="signupno"></el-table-column>
    <el-tableColumn label="活动名称" prop="vname"></el-tableColumn>
    <el-tableColumn label="活动地点" prop="vspot"></el-tableColumn>
    <el-tableColumn label="活动时间" prop="activitytime"></el-tableColumn>
 
    <el-tableColumn label="操作" with="180px">
      <template slot-scope="scope">
   
       <el-button type="warning" icon="el-icon-delete" size="mini" @click="removeSignupById(scope.row.signupno)">取消报名</el-button>
       <router-link :to="{name:'signup_info',params:{vno:scope.row.vno}}">
                  <el-button type="info" size="mini" plain>查看详情</el-button>
                  </router-link>

      </template>
    </el-tableColumn>



  </el-table>
    </el-card>
</template>
<script>

export default {

data() {

return {
  volunteerlist1:[],
  
}},
created(){
this.getVolunteer1List()

},
methods:{
  getVolunteer1List(){
 var parid1=JSON.parse(sessionStorage.getItem('userInfo'));
        var npar=parid1.parid;
 this.axios({
   url:"/api/signup/ownlist",
   method:"get",
   headers: {               
"Content-Type": "application/json",
},
params: { 
parid:npar,
},
 }).then(response=>{
       if((response.data.code == 0)){
       this.volunteerlist1 = response.data.data
   } else {
       alert(response.data.msg)
   }
   })
   .catch(error=>{
       alert(error);
   })
},
removeSignupById(signupno){
    this.$confirm(
      '是否确定取消报名此次活动',
      '提示',
      {confirmButtonText:'确定',
    cancelButtonText:'取消',
  type:"warning",}
    ).then(()=>{
      this.axios({     
            url: "/api/signup/delete", 
            method: "delete",            
            headers: {                
              "Content-Type": "application/json",
            },
            params: { 
              signupno:signupno,
            },
          })
        .then((response) => {
          if(response.data.code==0)
        
          this. getVolunteer1List()
        })

   
    
  })
  },
}
}
</script>